Form validation is an important part of any app.
In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.
Yup Schemas in Data
Making our validation schema reactive is an unnecessary overhead that we can eliminate.
To do this, we can either add the schema with the setUp method or call markRaw with our schema to make it non-reactive.
For example, we can write:
<template>
<Form v-slot="{ errors }" :validation-schema="schema">
<Field as="input" name="email" />
<span>{{ errors.email }}</span>
<br />
<Field as="input" name="password" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field } from "vee-validate";
import * as yup from "yup";
export default {
components: {
Form,
Field,
},
setup() {
const schema = yup.object().shape({
email: yup.string().required().email(),
password: yup.string().required().min(8),
});
return {
schema,
};
},
};
</script>
to create our schema in the setUp method.
We just return the object returned by Yup so the schema property won’t be reactive.
To call markRaw , we write:
<template>
<Form v-slot="{ errors }" :validation-schema="schema">
<Field as="input" name="email" />
<span>{{ errors.email }}</span>
<br />
<Field as="input" name="password" type="password" />
<span>{{ errors.password }}</span>
<br />
<button>Submit</button>
</Form>
</template>
<script>
import { markRaw } from "vue";
import { Form, Field } from "vee-validate";
import * as yup from "yup";
export default {
components: {
Form,
Field,
},
data() {
const schema = markRaw(
yup.object().shape({
email: yup.string().required().email(),
password: yup.string().required().min(8),
})
);
return {
schema,
};
},
};
</script>
We call markRaw with our Yup schema to make it non-reactive.
Radio Buttons
We can use Vee-Validate 4 to validate radio buttons.
For example, we can write:
<template>
<Form :validation-schema="schema" @submit="onSubmit">
<Field name="drink" type="radio" value=""></Field> None
<Field name="drink" type="radio" value="Tea"></Field> Tea
<Field name="drink" type="radio" value="Coffee"></Field> Coffee
<ErrorMessage name="drink" />
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from "vee-validate";
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {
return {
schema: {
drink: (value) => {
if (value) {
return true;
}
return "You must choose a drink";
},
},
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
We have the Field component with type set to radio to create our radio buttons.
Then in the data method, we return the schema reactive property with the drink method to validate our radio buttons.
value has the checked value as specified by the value prop.
We return true if the choices are valid and an error message otherwise.
And then we display the ErrorMessage component to show error messages.
Checkboxes
We can add checkbox validation with Vee-Validate 4.
For instance, we can write:
<template>
<Form :validation-schema="schema" @submit="onSubmit">
<Field name="drink" type="checkbox" value="Milk"></Field> Milk
<Field name="drink" type="checkbox" value="Tea"></Field> Tea
<Field name="drink" type="checkbox" value="Coffee"></Field> Coffee
<ErrorMessage name="drink" />
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from "vee-validate";
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {
return {
schema: {
drink: (value) => {
if (Array.isArray(value) && value.length) {
return true;
}
return "You must choose a drink";
},
},
};
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2));
},
},
};
</script>
to add validation for checkboxes. We set the type prop to checkbox to render a checkbox.
And the drink method has all the checked values in an array if any checkbox is checked.
We return true if the choices are valid and an error message otherwise.
And then we display the ErrorMessage component to show error messages.
Conclusion
We can make Yup schemas non-reactive to reduce overhead and validate radio buttons and checkboxes with Vee-Validate 4 in our Vue 3 app.
